<template>
    <div class="dashboard-box">
        <el-row :gutter="20">
            <el-col :span="8">

                <!--用户面板-->
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg" class="user-avator" alt="">
                        <div class="user-info-cont">
                            <div class="user-info-name">{{ userInfo.username }}</div>
                            <div>{{ userInfo.role==1?'管理员':'普通用户' }}</div>
                        </div>
                    </div>
                    <div class="user-info-list">用户姓名：<span>{{ releation.userName }}</span></div>
                    <div class="user-info-list">联系方式：<span>{{ releation.userTel }}</span></div>
                </el-card>

                <!--老人面板-->
                <el-card shadow="hover" class="mgb20" style="height:270px;">
                    <div slot="header" class="clearfix">
                        <span>老人详情</span>
                    </div>
                    <div class="user-info-list">老人姓名：<span>{{ oldManInfo.oldmanName }}</span></div>
                    <div class="user-info-list">老人性别：<span>{{ oldManInfo.oldmanSex }}</span></div>
                    <div class="user-info-list">老人年龄：<span>{{ oldManInfo.oldmanAge }}</span></div>
                    <div class="user-info-list">身份证号：<span>{{ oldManInfo.oldmanCardId }}</span></div>
                    <div class="user-info-list">护工姓名：<span>{{ nurseInfo.nurseName }}</span></div>
                    <div class="user-info-list">护工年龄：<span>{{ nurseInfo.nurseAge }}</span></div>
                    <div class="user-info-list">护工工龄：<span>{{ nurseInfo.workingYears }}</span></div>
                </el-card>

                <!--房间面板-->
                <el-card shadow="hover" style="height:230px;">
                    <div slot="header" class="clearfix">
                        <span>房间详情</span>
                    </div>
                    <div class="user-info-list">房间号码：<span>{{ roomInfo.id }}</span></div>
                    <div class="user-info-list">房&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：<span>{{ roomInfo.roomType }}</span></div>
                    <div class="user-info-list">面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;积：<span>{{ roomInfo.roomArea }} m²</span></div>
                    <div class="user-info-list">单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：<span>{{ roomInfo.unitPrice }}</span></div>
                    <div class="user-info-list">剩余时间：<span>{{ roomInfo.dayLeft }} 天</span></div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ oldManInfo.oldmanAge?oldManInfo.oldmanAge:0 }}</div>
                                    <div>老人年龄</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ managelist.length }}</div>
                                    <div>系统消息</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ roomInfo.dayLeft?roomInfo.dayLeft:0 }}</div>
                                    <div>房间到期时间</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="hover" style="height:674px;">
                    <div slot="header" class="clearfix">
                        <span>最新信息</span>
                    </div>
                    <el-table :data="managelist" height="550" style="width: 100%;font-size:14px;">
                        <el-table-column>
                            <template slot-scope="scope">
                                <span class="message-title">{{scope.row.noticeInfo}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="noticeDate" width="180"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>

    export default {
        name: 'dashboard',
        data() {
            return {
                userInfo    : JSON.parse(localStorage.getItem("bead_house")),          // 用户信息
                managelist  : [],                                                           // 消息列表
                releation   : {},                                                           // 用户信息
                oldManInfo  : {},                                                           // 老人信息
                nurseInfo   : {},                                                           // 护工信息
                roomInfo    : {},                                                           // 房间信息

            }
        },
        methods: {
            /**
             * 获取页面数据
             */
            getData(){

                // 获取用户信息
                this.$api.getReleation({
                    userId : this.userInfo.id,
                    role : this.userInfo.role,
                }).then((res)=>{

                    if( !res.data || res.data.length == 0 ){
                        return;
                    };

                    this.releation  = res.data;
                    this.oldManInfo = res.data.oldManInfo;
                    this.nurseInfo  = res.data.oldManInfo.nurseInfo;
                    this.roomInfo   = res.data.oldManInfo.roomInfo;
                });

                this.$api.getNotices({
                    userId: this.userInfo.id,
                    role: this.userInfo.role
                }).then((res)=>{
                    this.managelist = res.data;
                })
            },
        },
        beforeMount() {
            // 获取用户信息
            this.getData();
        }
    }

</script>


<style lang="less">

    .dashboard-box {

        .el-row {
            margin-bottom: 20px;
        }

        .grid-content {
            display: flex;
            align-items: center;
            height: 100px;
        }

        .grid-cont-right {
            flex: 1;
            text-align: center;
            font-size: 14px;
            color: #999;
        }

        .grid-num {
            font-size: 30px;
            font-weight: bold;
        }

        .grid-con-icon {
            font-size: 50px;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            color: #fff;
        }

        .grid-con-1 .grid-con-icon {
            background: rgb(45, 140, 240);
        }

        .grid-con-1 .grid-num {
            color: rgb(45, 140, 240);
        }

        .grid-con-2 .grid-con-icon {
            background: rgb(100, 213, 114);
        }

        .grid-con-2 .grid-num {
            color: rgb(45, 140, 240);
        }

        .grid-con-3 .grid-con-icon {
            background: rgb(242, 94, 67);
        }

        .grid-con-3 .grid-num {
            color: rgb(242, 94, 67);
        }

        .user-info {
            display: flex;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 2px solid #ccc;
            margin-bottom: 20px;
        }

        .user-avator {
            width: 120px;
            height: 120px;
            border-radius: 50%;
        }

        .user-info-cont {
            padding-left: 50px;
            flex: 1;
            font-size: 14px;
            color: #999;
        }

        .user-info-cont div:first-child {
            font-size: 30px;
            color: #222;
        }

        .user-info-list {
            font-size: 14px;
            color: #999;
            line-height: 25px;
        }

        .user-info-list span {
            margin-left: 40px;
        }

        .mgb20 {
            margin-bottom: 20px;
        }

        .todo-item {
            font-size: 14px;
        }

        .todo-item-del {
            text-decoration: line-through;
            color: #999;
        }

        .el-table::before {
            height: 0px;
        }

        .el-table__header-wrapper {
            display: none;
        }
    }

</style>
